<template>
    <div>
        <!-- 用户列表 -->
        <h1>商品列表</h1>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 搜索 -->
            <div style="margin-top: 15px;">
                <el-input class="ipts" placeholder="请输入内容" v-model="info.query">
                    <el-button slot="append" icon="el-icon-search" @click="searchs"></el-button>
                </el-input>
                <el-button type="primary" class="add" @click="adds">添加商品</el-button>
            </div>

            <!-- 添加弹出框 -->
            <el-dialog title="添加商品"  :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
                <!-- 表单验证 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!-- 商品名称 -->
                    <el-form-item label="商品名称" prop="goods_name" width="100%">
                        <el-input v-model="ruleForm.goods_name"></el-input>
                    </el-form-item>
                    <!-- 商品价格 -->
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="ruleForm.goods_price"></el-input>
                    </el-form-item>
                    <!-- 商品数量 -->
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="ruleForm.goods_number"></el-input>
                    </el-form-item>
                    <!-- 商品重量 -->
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="ruleForm.goods_weight"></el-input>
                    </el-form-item>
                    <!-- 商品图片上传 -->
                    <el-form-item label="商品图片">
                        <template>
                            <!-- 上传 -->
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
                                list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>

                        </template>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>


            <!-- 修改弹出框 -->
            <el-dialog title="修改商品" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">
                <!-- 表单验证 -->
                <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                    <!-- 商品名称 -->
                    <el-form-item label="商品名称" prop="goods_name" width="100%">
                        <el-input v-model="ruleForm1.goods_name"></el-input>
                    </el-form-item>
                    <!-- 商品价格 -->
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="ruleForm1.goods_price"></el-input>
                    </el-form-item>
                    <!-- 商品数量 -->
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="ruleForm1.goods_number"></el-input>
                    </el-form-item>
                    <!-- 商品重量 -->
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="ruleForm1.goods_weight"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm1('ruleForm1')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 表格 -->
            <el-table ref="singleTable" :data="users" style="width: 100%">
                <!-- 序号 -->
                <el-table-column type="index" label="#" width="50">
                </el-table-column>
                <!-- 姓名 -->
                <el-table-column property="goods_name" label="商品名称">
                </el-table-column>
                <!-- 邮箱 -->
                <el-table-column property="goods_price" label="商品价格" width="260px">
                    <template slot-scope="scope">
                            {{ scope.row.goods_price}} &nbsp;$
                    </template>
                </el-table-column>
                <!-- 电话 -->
                <el-table-column property="goods_weight" label="商品重量" width="160px">
                    <template slot-scope="scope">
                            {{ scope.row.goods_weight}} &nbsp;KG
                    </template>
                </el-table-column>
                <!-- 角色 -->
                <el-table-column property="add_time" label="创建时间" width="160px">
                    <template slot-scope="scope">
                        {{ scope.row.add_time | dates }}
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column property="address" label="操作" width="160px">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" size="mini" class="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <!-- 删除 -->
                        <el-button type="danger" size="mini" class="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="info.pagenum" :page-sizes="[5, 10, 15, 100]" :page-size="info.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import { cartList, addCommodity, editComdity, delComdity } from '@/request/Api';
export default {
    data() {
        return {
            // 图片上传
            fileList: [{ name: 'food.jpeg', url: '../assets/13.jpg' }],
            // 添加框
            dialogVisible: false,
            // 修改框
            dialogVisible1: false,
            // 搜索
            search: '',
            //表格
            users: [],
            // 添加表单验证
            ruleForm: {
                goods_name: '',
                goods_price: '',
                goods_number: '',
                goods_weight: ''
            },
            // 分页
            info: {
                // 页码
                pagenum: 1,
                // 条数
                pagesize: 5,
                query: ""
            },
            // 一共多少页
            total: 0,
            rules: {
                //商品名称
                goods_name: [
                    { required: true, message: '商品名称不能为空', trigger: 'blur' },
                ],
                //商品价格
                goods_price: [
                    { required: true, message: '商品价格不能为空', trigger: 'blur' },
                ],
                //商品数量
                goods_number: [
                    { required: true, message: '商品数量不能为空', trigger: 'blur' },
                ],
                //商品重量
                goods_weight: [
                    { required: true, message: '商品重量不能为空', trigger: 'blur' },
                ],
            },

            // 修改表单验证
            ruleForm1: {
                goods_id: '',
                goods_name: '',
                goods_price: '',
                goods_number: '',
                goods_weight: '',
                goods_introduce: '',
                pics: '',
                attrs: '',
            },
            rules1: {
                //商品名称
                goods_name: [
                    { required: true, message: '商品名称不能为空', trigger: 'blur' },
                ],
                //商品价格
                goods_price: [
                    { required: true, message: '商品价格不能为空', trigger: 'blur' },
                ],
                //商品数量
                goods_number: [
                    { required: true, message: '商品数量不能为空', trigger: 'blur' },
                ],
                //商品重量
                goods_weight: [
                    { required: true, message: '商品重量不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    filters: {
        dates(time) {
            return new Date(time).toLocaleString()
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delComdity({ id: row.goods_id }).then(res => {
                    this.getList()
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.info.pagesize = val
            this.getList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.info.pagenum = val
            this.getList()
        },
        // 商品数据
        getList() {
            cartList(this.info).then(res => {
                // console.log(res.data.data);
                this.users = res.data.data.goods
                this.total = res.data.data.total
            })
        },
        // 图片上传
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
        // 搜索
        searchs() {

            this.getList()
        },
        // 添加表单判断
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    // 添加的参数
                    let addObj = {
                        goods_cat: '1,2,3',
                        ...this.ruleForm
                    }
                    addCommodity(addObj).then(res => {
                        console.log(res);
                        this.getList()
                    })
                    this.dialogVisible = true
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('添加失败！')
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 添加框弹出
        adds() {
            this.dialogVisible = false
            this.$router.push('/Add')
        },

        // 修改表单判断
        submitForm1(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 修改的参数
                    let obj = {
                        goods_cat: '1,2,3',
                        ...this.ruleForm1
                    }
                    editComdity(obj).then(res => {
                        // console.log(res);
                        this.getList()
                    })
                    this.dialogVisible1 = false
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('修改失败！')
                    return false;
                }
            });
        },
        resetForm1(formName) {
            this.$refs[formName].resetFields();
        },
        // 关闭添加框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 修改按钮
        handleEdit(index, row) {
            console.log(index, row.goods_id);
            this.ruleForm1.goods_name = row.goods_name
            this.ruleForm1.goods_price = row.goods_price
            this.ruleForm1.goods_number = row.goods_number
            this.ruleForm1.goods_weight = row.goods_weight
            this.ruleForm = { ...row }
            this.dialogVisible1 = true
            this.ruleForm1.goods_id = row.goods_id
        },

    },
}
</script>
<style lang="scss" scoped>
.block {
    margin: 20px auto;
}

.cont {
    text-align: left;

    span:nth-child(1) {
        padding-top: 50px;
    }

    div:nth-child(2) {
        margin-top: 20px;
    }
}

.block {
    float: left;
    margin: 20px 0px;
}

.el-input__inner::v-deep {
    width: 100px;
}

.box-card {
    width: 94%;
    margin: 20px auto;
}

.ipts {
    width: 30%;
    float: left;
}

.add {
    float: left;
    margin-left: 50px;
}
</style>